<template>
<div :style="{width:width,height:height}">
    <div v-show="flag"  class="" ref="echarts" :style="{height:height}"></div>
    <div v-show="!flag"  class="no-data-echarts">
        {{message}}
    </div>
</div>
</template>
<script>
import mixincomon from '../../mixins/mixincomon';

export default {
    name:"chart",
    mixins: [mixincomon],
    data(){
        return {
            flag:true,
            options: {
                color:['#5dc762','#008aff',"#ffc945"],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    show:true,
                    data: [],
                    textStyle:{
                        color:'#fff'
                    },
                    type:"scroll",
                    icon:"rect",
                    pageIconInactiveColor:'#aaa',
                    pageIconColor:"#008aff",
                    pageTextStyle:{
                        color:"#fff",
                    }
                },
                 radar: {
                        name: {
                            textStyle: {
                                padding: [3, 5]
                            }
                        },
                        indicator: [
                            { name: '查询任务'},
                            { name: '考试任务'},
                            { name: '学习任务'}
                        ],
                        splitArea: {
                            areaStyle: {
                                color:'rgba(0,0,0,0)',
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#1b2c66'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#1b2c66'
                            }
                        },
                    },
                series: [{
                    type: 'radar',
                    data:[],
                    areaStyle: {
                        opacity: 0.1,
                    }
                }]
            },

        }
    },
    props:{
        option:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        data:{
            type:Array,
            default:()=>{
                return []
            }
        },
        width:{
            type:String,
            default:"300px"
        },
        height:{
            type:String,
            default:"300px"
        },
        message:{
            type:String,
            default:'暂无数据'
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            if(this.data.length>0){
                let _option=this.tool.deepMerge(this.options,this.option);
                this.flag=true;
                this.$nextTick(()=>{
                    let legend=[],series=[];
                    this.data[0].data.map((item)=>{
                        legend.push(item.name?item.name:'');
                    })
                    this.data.map((item,index)=>{
                        series.push(this.tool.deepMerge(Object.assign({type:'pie'},_option.series[index]),item));
                    })
                    _option.series=series;
                    _option.legend.data=legend;
                    _option.radar.indicator.map((item,index)=>{

                    })
                    this.initChart('echarts',_option);
                 })

            }else{
                this.clearChart();
                this.flag=false;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.no-data-echarts{
    height: 100%;
    position: relative;
    span{
        left: 0;
        text-align: center;
        position: absolute;
        top: 45%;
    }
}
</style>
